<!DOCTYPE html>
<html lang="es">
    <head>
        <title>API Youtube</title>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>

        <link rel='StyleSheet' href='css/youtube.css' type='text/css'>

        <script src='js/jquery-1.7.2.min.js'></script>
        <script src='js/jquery.xdr-transport.js'></script>
        <script src='js/swfobject.js'></script>

        <script>
            /* provide here the id of the video */
            var identifier = 'Nxhq3j8BADM';

            var params = {allowScriptAccess: 'always'};
            var atts = {id: 'video'};
            swfobject.embedSWF('http://www.youtube.com/v/' + identifier + '?enablejsapi=1&playerapiid=ytplayer', 'ytapiplayer', '425', '356', '8', null, null, params, atts);

            function onYouTubePlayerReady(playerId) {
                ytplayer = document.getElementById('video');
            };

            function collectData() {
                $.ajax({
                    url: 'http://gdata.youtube.com/feeds/api/videos/' + identifier + '?v=2&alt=json',
                    dataType: 'json',
                    cache: false,
                    success: function(data) {
                    var title = data.entry.title['$t'];
                    var description = data.entry.media$group.media$description['$t'];
                    var date = data.entry.published['$t'];
                    var duration = data.entry.media$group.yt$duration['seconds'];
                    var viewCount = data.entry.yt$statistics['viewCount'];

                    $('li#title').append('<span>Title:</span> ' + title);
                    $('li#description').append('<span>Description:</span> ' + description);
                    $('li#date').append('<span>Published on:</span> ' + date);
                    $('li#duration').append('<span>Duration:</span> ' + duration + ' seconds');
                    $('li#viewCount').append('<span>Viewed:</span> ' + viewCount + ' times');
                    }
                });
            };

            $(document).ready(function () {
                collectData();
            });
        </script>

        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>

        <div id="wrapper">

            <div id="videoPlayer">

                <div id="ytapiplayer">
                    <p>You need Flash player 8+ and JavaScript enabled to view this video.</p>
                </div><!-- #ytapiplayer -->

            </div><!-- #videoplayer -->

            <ul id="data">
                <li id="title"></li>
                <li id="description"></li>
                <li id="date"></li>
                <li id="duration"></li>
                <li id="viewCount"></li>
            </ul><!-- #data -->

        </div><!-- #wrapper -->

    </body>
    
</html>